<style rel="stylesheet/scss" lang="scss" scoped>
	.content {
		display: flex;
		height: 100%;
		flex-direction: column;
		.content-head {
			width: 100%;
			height: auto;
			padding: 10px 10px;
			border: 1px solid #E5E5E5;
			.head-tit {
				width: 100%;
				height: 30px;
				display: flex;
				line-height: 40px;
				.text-q {
					color: #409EFF;
				}
			}
			.m-t-30 {
				margin-top: 30px;
			}
			.m-t-10 {
				margin-left: 0px;
			}
		}
	}

	.td-pro {
		width: 100%;
		height: 50px;
	}

	.table-box {
		padding: 10px;
		height: 620px;
		margin-top: 20px;
		overflow: auto;
		border: 1px solid #E5E5E5;
	}

	.table-b {
		border: 1px solid #E5E5E5;
		td {
			text-align: center;
			color: #101010;
		}
		th {
			color: #666;
		}
	}
</style>
<template>
	<div class="content">
		<div class="content-head">
			<div class="head-tit m-b-10">
				<span class="text-14" style="margin-right: 15px;">订单号:</span>
				<el-input placeholder="" maxLength="20" style="width: 220px;" class="m-l-10" v-model="orderId" size="mini"></el-input>
			</div>
			<div class="head-tit m-b-10">
				<span class="text-14">创建时间:</span>
				<el-date-picker 
					class="m-l-10" 
					size="mini" 
					v-model="beginTime" 
					type="datetime" 
					placeholder="选择开始时间"
					align="right" 
					style="width: 220px;"
					:picker-options="pickerOptions1">
				</el-date-picker>
				<span class="m-l-10 text-14">至:</span>
				<el-date-picker 
					class="m-l-10" 
					size="mini" 
					v-model="endTime" 
					type="datetime"
					placeholder="选择结束时间" 
					align="right" 
					style="width: 220px;"
					:picker-options="pickerOptions1">
				</el-date-picker>
				<span class="m-l-10 text-q text-14" @click="getOneWeekDate(1)" style="cursor: pointer;">最近7天</span>
				<span class="m-l-10 text-q text-14" @click="getOneWeekDate(2)" style="cursor: pointer;">最近30天</span>
			</div>
			
			<el-row class="m-t-10 m-t-10">
				<el-button type="primary" @click="screenFn(1)" size="mini">筛选</el-button>
				<el-button type="primary" @click="screenFn(2)" size="mini">重置</el-button>
			</el-row>
		</div>
		<div class="table-box">
			<template>
				<el-table :data="list" stripe style="width: 100%">
					<el-table-column prop="orderId" label="订单号" width="180" align="center">
					</el-table-column>
					<el-table-column prop="name" label="类型" width="180" align="center">
						<template scope="scope">
							<span v-if="scope.row.transactionType=='PAY'">收入</span>
							<span v-if="scope.row.transactionType=='REFUND'">退款</span>
						</template>
					</el-table-column>
					<el-table-column prop="money" label="金额" align="center">
					</el-table-column>
					<el-table-column prop="createTime" label="创建时间" align="center">
					</el-table-column>
					<el-table-column label="操作" width="300" align="center" v-if="basicMall">
						<template scope="scope"  >
							<el-button  size="mini" type='primary' @click="$router.push({path:'/order',query:{orderId:scope.row.orderId}})">查看订单</el-button>
						</template>
					</el-table-column>
				</el-table>
			</template>
		</div>
		<current-page :current-page="page" :page-size="pageSize" :page-total="totalPage" @handleCurrentChange="handleCurrentChange">
		</current-page>
	</div>
</template>
<script>
	import {
		getToken
	} from '@/utils/auth'
	import {
		SUCCESS_REQUEST_STATUS
	} from '@/utils/config.js'
	import currentPage from '@/components/current-page/current-page.vue'
	export default {
		data() {
			return {
				list: null,					// 列表数据
				beginTime: '',				// 开始时间
				endTime: '',				// 结束时间
				orderId: '',				// 订单号
				page: 0,					// 页码	
				basicMall:false,			// 是否开通商城
				totalPage: 0,				// 总页
				pageSize: 10,				// 显示多少条
				beginFilterTime: '',		// 过滤过后的开始时间
				endFilterTime: '',			// 过滤过后的结束时间
				pickerOptions1: {
					shortcuts: [{
						text: '今天',
						onClick(picker) {
							picker.$emit('pick', new Date());
						}
					}, {
						text: '昨天',
						onClick(picker) {
							const date = new Date();
							date.setTime(date.getTime() - 3600 * 1000 * 24);
							picker.$emit('pick', date);
						}
					}, {
						text: '一周前',
						onClick(picker) {
							const date = new Date();
							date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
							picker.$emit('pick', date);
						}
					}]
				}
			}
		},
		created() {
			this._initData()
			this.basicMall =  window.localStorage.getItem('basicMall') ?  JSON.parse(window.localStorage.getItem('basicMall')) : false
		},
		methods: {
			// 筛选或重置
			screenFn(num) {
				if (num == 2) {
					this.page = 0;
					this.beginTime = this.endTime = this.beginFilterTime = this.endFilterTime = this.orderId = ''
				}
				this._initData()
			},
			_initData() {
				this.$ajax({
					api: 'merchant/transaction/query',
					params: {
						beginTime: this.beginFilterTime,
						endTime: this.endFilterTime,
						orderId: this.orderId,
						page: this.page,
						pageSize: this.pageSize,
						token: getToken(),
						merchantUserId: window.localStorage.getItem('merchantUserId') ? window.localStorage.getItem('merchantUserId') :
							''
					}
				}).then(res => {
					if (res.status === SUCCESS_REQUEST_STATUS) {
						this.page = res.data.page.page
						this.totalPage = res.data.page.total
						this.list = res.data.transactionLogList
					}
				})
			},
			/**
			 *  格式化时间
			 *	@param {String}  unixTime 时间戳
			 * 	@param {Boolean}  isFull 是否到毫秒级
			 * */
			TransformationTime(time, isFull) {
				var ymdhis = ""
				ymdhis += time.getFullYear() + "-"
				ymdhis += (time.getMonth() + 1) < 10 ? '0' + (time.getMonth() + 1) + "-" : (time.getMonth() + 1) + "-"
				ymdhis += time.getDate() < 10 ? '0' + time.getDate() : time.getDate()
				if (isFull === true) {
					ymdhis += " " + time.getHours() < 10 ? " " + '0' + time.getHours() + ":" : " " + time.getHours() + ":"
					ymdhis += time.getMinutes() < 10 ? '0' + time.getMinutes() + ":" : time.getMinutes() + ":"
					ymdhis += time.getSeconds() < 10 ? '0' + time.getSeconds() : time.getSeconds()
				}
				return ymdhis
			},
			handleCurrentChange(page) {
				this.page = page
				this._initData()
			},
			// 获取前一周时间
			getOneWeekDate(num) {
				let before = ''
				let target = new Date()
				let nowdate = new Date()
				switch (num) {
					case 1:
						before = new Date(nowdate - (7 * 24 * 3600 * 1000))
						break;
					case 2:
						nowdate.setMonth(nowdate.getMonth()-1);
						before = nowdate
						nowdate = target
						break;
				}
				this.beginFilterTime = this.beginTime =
					`${before.getFullYear()}-${(before.getMonth() +1)}-${before.getDate()} 00:00:00`
				this.endFilterTime = this.endTime =
					`${nowdate.getFullYear()}-${(nowdate.getMonth() +1)}-${nowdate.getDate()} 00:00:00`
			}
		},
		watch: {
			beginTime: function (val) {
				if (val) {
					
					val = typeof val == 'string' ? new Date(val) : val
					this.beginFilterTime = this.TransformationTime(val, true)
				}
			},
			endTime: function (val) {
				if (val) {
					val = typeof val == 'string'? new Date(val) : val
					this.endFilterTime = this.TransformationTime(val, true)
				}
			}
		},
		components: {
			currentPage
		}
	}
</script>
